<template>
  <div class="slide">
    <div class="wrap" :style="{ opacity }">
      <el-carousel trigger="click" height="450px" :autoplay="false">
        <el-carousel-item v-for="item in slides" :key="item.id" class="small">
          <div class="small-bd">
            <div class="one">{{ item.title }}</div>
            <div class="two">{{ item.field }}</div>
            <img class="bj" :src="item.img" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opacity: '0',
      slides: [
        {
          id: 1,
          title: '多方式创建编辑问卷',
          field: '自由创建、导入问卷、使用模板三种方式随意选择',
          img: 'https://wj.qq.com/image/index_slider_p0.png?v=@version',
        },
        {
          id: 2,
          title: '免费简约的问卷系统',
          field: '所有功能全部免费，简约好用，轻松开启在线调试',
          img: 'https://wj.qq.com/image/index_slider_p1.png?v=@version',
        },
        {
          id: 3,
          title: '数据实时在线统计分析',
          field: '回收数据实时在线统计，图表化展示，清晰直观',
          img: 'https://wj.qq.com/image/index_slider_p2.png?v=@version',
        },
        {
          id: 4,
          title: '跨终端跨平台自适应',
          field: 'PC、手机、平板不同终端自适应，调研随时随地',
          img: 'https://wj.qq.com/image/index_slider_p3.png?v=@version',
        },
      ],
    };
  },

  mounted() {
    this.showSlide();
  },

  methods: {
    showSlide() {
      this.$nextTick(() => {
        this.opacity = '1';
      });
    },
  },
};
</script>

<style>
.slide .el-carousel__button {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  opacity: 1;
}

.slide .is-active .el-carousel__button {
  background-color: transparent;
}

.slide .el-carousel__indicators--horizontal {
  /* left: 40px; */
  /* transform: none; */
  bottom: 6px;
  margin-left: -4px;
  margin-right: -4px;
}
</style>

<style lang="scss" scoped>
.wrap {
  opacity: 0;
  transition: 5s;
}

.small {
  text-align: center;
  color: #fff;
}

.small-bd {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -30px;
}

.slide {
  background: url("../assets/hh.jpg");
  background-position: center -60px;
}

.one {
  color: #fff;
  font-size: 50px;
  // margin-bottom: 5px;
}

.two {
  margin-top: -3px;
  color: #fff;
  font-size: 20px;
  margin-bottom: 33px;
  position: relative;
  top: 0.5px;
}

.one,
.two,
.bj {
  flex-shrink: 0;
}
</style>
